<template>
  <div class="q-pa-md">
    <div class="text-h5 q-mb-lg">FyTable 组件示例</div>

    <!-- 1. 基础表格 -->
    <div class="example-section q-mb-xl">
      <div class="text-h6 q-mb-md">1. 基础表格</div>
      <basic-table />
    </div>

    <!-- 2. 单选表格 -->
    <div class="example-section q-mb-xl">
      <div class="text-h6 q-mb-md">2. 单选表格</div>
      <single-select-table />
    </div>

    <!-- 3. 多选表格 -->
    <div class="example-section q-mb-xl">
      <div class="text-h6 q-mb-md">3. 多选表格</div>
      <multiple-select-table />
    </div>

    <!-- 4. 树形表格 -->
    <!-- <div class="example-section q-mb-xl">
      <div class="text-h6 q-mb-md">4. 树形表格</div>
      <tree-table />
    </div> -->

    <!-- 5. 完整功能表格 -->
    <div class="example-section q-mb-xl">
      <div class="text-h6 q-mb-md">5. 完整功能表格</div>
      <full-featured-table />
    </div>

    <!-- 6. 自定义样式表格 -->
    <div class="example-section q-mb-xl">
      <div class="text-h6 q-mb-md">6. 自定义样式表格</div>
      <custom-styled-table />
    </div>
  </div>
</template>

<script setup>
import BasicTable from 'pages/Example/TableExample/components/BasicTable.vue'
import SingleSelectTable from 'pages/Example/TableExample/components/SingleSelectTable.vue'
import MultipleSelectTable from 'pages/Example/TableExample/components/MultipleSelectTable.vue'

import FullFeaturedTable from 'pages/Example/TableExample/components/FullFeaturedTable.vue'
import CustomStyledTable from 'pages/Example/TableExample/components/CustomStyledTable.vue'
</script>

<style lang="scss" scoped>
.example-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
</style>
